@solid-aria/focus

@solid-aria/focus

Primitives for dealing with focus rings and focus management.

• createFocusable - Make an element focusable, capable of auto focus and excludable from tab order.
• createFocusRing - Determines whether a focus ring should be shown to indicate keyboard focus.

Installation

npm install @solid-aria/focus
# or
yarn add @solid-aria/focus
# or
pnpm add @solid-aria/focus

createFocusable

Make an element focusable, capable of auto focus and excludable from tab order.

How to use it

import { createFocusable, CreateFocusableProps } from "@solid-aria/focus";
import { JSX, mergeProps } from "solid-js";

type TextFieldProps = JSX.IntrinsicElements["input"] & CreateFocusableProps;

function TextField(props: TextFieldProps) {
  let ref: HTMLInputElement | undefined;

  const { focusableProps } = createFocusable(props, () => ref);

  const inputProps = mergeProps(props, focusableProps);

  return <input {...inputProps} ref={ref} />;
}

function App() {
  return (
    <>
      <TextField autoFocus />
      <TextField excludeFromTabOrder />
    </>
  );
}

createFocusRing

The createFocusRing primitive returns whether a focus ring should be displayed to indicate keyboard focus for a component. This helps keyboard users determine which element on a page or in an application has keyboard focus as they navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse and touch screen users.

How to use it

This example shows how to use createFocusRing to adjust styling when keyboard focus is on a button. Specifically, the outline property is used to create the focus ring when isFocusVisible is true.

import { createFocusRing } from "@solid-aria/focus";

function Example() {
  const { isFocusVisible, focusProps } = createFocusRing();

  return (
    <button
      {...focusProps()}
      style={{
        "-webkit-appearance": "none",
        appearance: "none",
        background: "green",
        border: "none",
        color: "white",
        "font-size": "14px",
        padding: "4px 8px",
        outline: isFocusVisible() ? "2px solid dodgerblue" : "none",
        "outline-offset": "2px"
      }}
    >
      Test
    </button>
  );
}

See createCheckbox, createRadioGroup, and createSwitch for more advanced examples of focus rings with other styling techniques.

Changelog

All notable changes are described in the CHANGELOG.md file.